<template>
  <div class="model-warp">
    <div class="model-bg" />
    <div
      class="model-container"
      :style="{ width }"
    >
      <div
        v-if="title"
        class="model-title"
      >
        {{ title }}
      </div>
      <div
        v-if="describe"
        class="model-describe"
      >
        {{ describe }}
      </div>
      <scroll-mask class="model-body">
        <slot />
      </scroll-mask>
      <div
        v-if="!noSubmit"
        class="submit"
      >
        <button
          class="submit-btn"
          @click="onSubmit"
        >
          <span class="tracking-15px pl-15px">提交</span>
        </button>
      </div>
      <button
        class="close-btn"
        @click="onClose"
      >
        <icon-font
          name="close"
          class="text-16px"
        />
      </button>
    </div>
  </div>
</template>

<script
  lang="ts"
  setup
  name="XDialog"
>
// eslint-disable-next-line vue/require-prop-types
defineProps(['loading', 'title', 'describe', 'width', 'noSubmit'])


const emit = defineEmits(['onSubmit', 'onClose'])

const onSubmit = () => emit('onSubmit')

const onClose = () => emit('onClose')

</script>

<style
  scoped
  lang="scss"
>
.model-warp {
  @apply fixed top-0 left-0 right-0 bottom-0 z-1086 text-white;

  .model-bg {
    @apply absolute backdrop-filter backdrop-blur-4 top-0 left-0 bottom-0 right-0 z-0;
    background-color: rgba(0, 0, 0, 0.1);
  }

  .model-container {
    @apply absolute top-[50%] left-[50%] flex flex-col items-center z-1;
    width: 328px;
    max-height: 425px;
    transform: translate(-50%, -55%);
    padding: 16px 15px 20px 18px;

    &>* {
      z-index: 1;
    }

    &::before {
      @apply absolute backdrop-filter backdrop-blur-20px top-0 left-0 bottom-0 right-0 z-0;
      content: '';
      background: rgba(239, 247, 255, 0.7);
      border: 1px solid rgba(0, 0, 0, 0.15);
      border-radius: 10px;
    }

    .model-title {
      @apply flex-1 w-full;
      font-size: 16px;
      line-height: 21px;
      font-weight: 600;
      margin-bottom: 12px;
      color: #3B5379;
    }

    .model-describe {
      @apply flex-1 w-full;
      font-size: 11px;
      line-height: 21px;
      margin-bottom: 12px;
      color: rgba(59, 83, 121, 0.65);
    }

    .model-body {
      @apply w-full;
      padding-right: 10px;
      margin-right: -8px;

      ::-webkit-scrollbar {
        width: 2px;
      }

      &::-webkit-scrollbar-track {
        background: #BBC2C9;
      }

      &::-webkit-scrollbar-thumb,
      &::-webkit-scrollbar-thumb:hover,
      &::-webkit-scrollbar-thumb:active {
        background: #4673EE;
      }
    }

    .submit {
      text-align: center;
      margin-top: 22.5px;

      .submit-btn {
        @apply flc;
        width: 120px;
        height: 34px;
        background: #235BD7;
        border-radius: 6px;
        color: #FFFFFF;
        font-size: 14px;
        text-align: center;

        &:active {
          color: rgba(255, 255, 255, 0.65);
          background: #7C9CE3;
        }
      }
    }

    .close-btn {
      @apply absolute flc;
      width: 34.5px;
      height: 34.5px;
      border: 1px solid #ffffff;
      border-radius: 50%;
      bottom: -50px;
      font-size: 16.5px;

      &:active {
        opacity: 0.6;
      }
    }
  }
}</style>
